<script setup lang="ts">
import { User } from '$/client'
import ComCtl from '@/components/ComCtl.vue'
import AdminForm from '@/components/form-admin/AdminForm.vue'
import RecordInfo from '@/components/RecordInfo.vue'
import { Admins } from '@/scripts/client-admin'
import { useRequest } from 'alova/client'
import { Card } from 'vexip-ui'

const {
  loading: refreshing,
  data: user,
  send: refresh
} = useRequest(Admins.me, {
  initialData: User.inst()
})
const { loading: updating, send: udpate } = useRequest(() => Admins.update(user.value), {
  immediate: false
}).onSuccess(refresh)
</script>

<template>
  <ComCtl content-class="flex flex-col gap-2 sm:mx-auto sm:max-w-xl" :loading="refreshing" scroll>
    <Card title="用户信息">
      <template #extra>
        <RecordInfo :info="user" />
      </template>
      <AdminForm v-model="user" :loading="updating" :submit="udpate" />
    </Card>
  </ComCtl>
</template>
